<template>
  <div class="app-container">
    <el-dialog title="新增/编辑"
               :close-on-click-modal=false
               :visible.sync="dialogVisible">
      <el-form ref="form"
               :model="form"
               :rules="formRules"
               v-loading="formLoading">
        <el-form-item label="用户名"
                      prop="Username"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Username"
                    v-if="form.Id != 0"
                    :readonly="true"></el-input>
          <el-input v-model="form.Username"
                    v-else></el-input>
        </el-form-item>
        <el-form-item label="姓名"
                      prop="Name"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码"
                      prop="TelPhone"
                      :label-width="formLabelWidth">
          <el-input v-model="form.TelPhone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱"
                      prop="Email"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Email"></el-input>
        </el-form-item>
        <el-form-item label="是否激活"
                      prop="IsActive"
                      :label-width="formLabelWidth">
          <el-switch v-model="form.IsActive"
                     active-color="#13ce66"
                     inactive-color="#cecbcb">
          </el-switch>
        </el-form-item>

        <el-form-item label="角色"
                      prop="Roles"
                      :label-width="formLabelWidth">

          <el-select v-model="form.Roles"
                     multiple
                     style="width:100%;"
                     placeholder="请选择">
            <el-option v-for="item in roles"
                       :key="item.Id"
                       :label="item.Name"
                       :value="item.Id">
            </el-option>
          </el-select>

        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   :loading="formLoading"
                   @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { load, update, getRole } from '@/api/sys/account'
import { read } from '@/api/sys/role'

export default {
  name: 'update-dialog',
  data () {
    return {
      loading: false,
      formLabelWidth: '120px',
      dialogVisible: false,
      formLoading: true,
      form: {
        Id: 0,
        Username: '',
        Name: '',
        TelPhone: '',
        Email: '',
        IsActive: false,
        Roles: []
      },
      formRules: {
        Username: [{ required: true, message: '用户名是必须的', trigger: 'blur' }]
      },
      roles: []
    }
  },
  created () { },
  updated () { },
  methods: {
    submit () {
      let form = this.form
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          update(form).then(response => {
            // 更新父列表
            this.$parent.getList()
            // 成功消息
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.dialogVisible = false
          })
        } else {
          return false;
        }
      });
    },
    open (id) {
      let that = this
      that.dialogVisible = true
      that.formLoading = true

      read().then(response => {
        this.roles = response.Data
      })

      if (id) {
        load(id).then(response => {
          var data = response.Data
          that.form = data
          that.formLoading = false
        })
      }
      else {
        // 新增 重置数据
        Object.assign(this.$data.form, this.$options.data().form)
        that.formLoading = false
      }
    },
    close () {
      this.dialogVisible = false
    }
  }
}
</script>
